<template>
    <div class="login-box flex align-center justify-center">
        <el-form :model="loginForm" label-width="120px">
            <el-form-item label="用户名">
                <el-input v-model="loginForm.username"/>
            </el-form-item>
            <el-form-item label="手机号码">
                <el-input v-model="loginForm.mobile"/>
            </el-form-item>
            <el-form-item label="图形验证码">
                <div class="flex">
                    <el-input v-model="captcha" class="margin-right-5"/>
                    <captchaTemp ref="captchaTempRef"></captchaTemp>
                </div>
            </el-form-item>
            <el-form-item label="短信验证码">
                <div class="flex">
                    <el-input v-model="loginForm.sms_code" class="margin-right-5"/>
                    <el-button type="primary" @click="sendCode">发送验证码</el-button>
                </div>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="loginForm.rg_password" show-password/>
            </el-form-item>
            <el-form-item label="确认密码">
                <el-input v-model="loginForm.rg_password_confirmation" show-password/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
    import captchaTemp from '../../components/captchaTemp.vue'
    import {reactive, ref} from "vue";
    import {registerAuth, registerSMS} from "../../http/common";
    import {ElMessage} from 'element-plus'
    import {useRouter} from "vue-router";

    const loginForm = reactive({
        username: '',
        mobile: '',
        rg_password: '',
        rg_password_confirmation: ''
    })

    const router = useRouter()
    const captcha = ref('')
    const captchaTempRef = ref('')

    //发送验证码
    const sendCode = () => {
        if (!captcha.value) {
            ElMessage.error('请先输入图形验证码')
            return;
        } else {
            let paramsData = {
                mobile: loginForm.mobile,
                captcha: captcha.value,
                key: captchaTempRef.value.captchaKey
            }
            registerSMS(paramsData).then(res => {
                console.log("res", res)
                const {code} = res
                if (code === 0) {
                    ElMessage({
                        message: '短信发送成功',
                        type: 'success',
                    })
                }
            })
        }
    }

    //注册
    const onSubmit = () => {
        registerAuth(loginForm).then(res => {
            console.log("res", res)
            const {code} = res
            if (code === 0) {
                ElMessage({
                    message: '注册成功',
                    type: 'success',
                })
                router.push({
                    path: '/login'
                })
            }
        })
    }

</script>

<style lang="scss" scoped>
  @import "@/assets/css/variables.scss";

  .login-box {
    height: 100vh;
  }
</style>
